<template>
     <picker-view
            indicator-style="height: 50px"
            :value="value1"
            @change="bindChange1"
            class="picker-view"
        >
            <picker-view-column>
                <view class="item" v-for="(item, index) in years" :key="index">
                    <text>{{ item }}年</text>
                </view>
            </picker-view-column>
            <picker-view-column>
                <view class="item" v-for="(item, index) in months" :key="index">
                    <text>{{ item }}月</text>
                </view>
            </picker-view-column>
            <picker-view-column>
                <view class="item" v-for="(item, index) in days" :key="index"
                    >{{ item }}
                    <text>日</text>
                </view>
            </picker-view-column>
        </picker-view>
</template>

<script setup lang="ts">
import { ref,onMounted, reactive, watchEffect, toRefs } from "vue";
const props = defineProps({
    sex: {
        type: Number,
    },
    age: {
        type: Number,
    },
});

const date = new Date();
const years = ref([]);
const year = ref(date.getFullYear());
const months = ref([]);
const month = ref(date.getMonth() + 1);
const days = ref([]);
const day = ref(date.getDate());
for (let i = 1990; i <= date.getFullYear(); i++) {
    years.value.push(i);
}
for (let i = 1; i <= 12; i++) {
    months.value.push(i);
}
for (let i = 1; i <= 31; i++) {
    days.value.push(i);
}
const value1 = ref([9999, month - 1, day - 1]);
const bindChange1 = (e: any) => {
    const val = e.detail.value;
    year.value = years.value[val[0]];
    month.value = months.value[val[1]];
    day.value = days.value[val[2]];
};

</script>
<style lang="scss" scoped>

//flex样式不要删  nvue中读不到公共样式
.a-center {
    align-items: center;
}

.j-center{
    justify-content: center;
}

.j-between {
    justify-content: space-between;
}

.j-around {
    justify-content: space-around;
}


.d-flex {
    display: flex;
}

.d-c {
    flex-direction: column;
    
}
.d-r {
    flex-direction: row;
}

.j-end {
    justify-content: flex-end;
}

.picker-view {
    width: 750rpx;
    height: 600rpx;
    margin-top: 20rpx;
}
.item {
    line-height: 100rpx;
    text-align: center;
}

</style>

